
<template>
    <Account>
        <template v-slot:header>
            <NavBar :title="$t('account.notifications')"/>
        </template>
        <div class="notification">
             <p class="notification_title">{{$t('account.notifications')}}</p>
            <div class="notification_error l-f l-row-c" v-if="isLoadEnd && listData.length === 0">
                <NoData :title="$t('account.oops')" :desc="$t('account.newsNoData')" />
            </div>
            <div class="notification_list" v-else>
                <router-link :to="'/webview?id=' + item.id" class="notification_list_item l-f" v-for="(item) in listData" :key="item.id">
                   <div class="l-f1" > 
                     <p  class="notification_list_item_title">{{item.title}}</p>
                     <p class="notification_list_item_time">{{item.create_time}}</p>
                   </div>
                   <img class="notification_list_item_icon" src="@/assets/icons/icon-right.svg" />
                </router-link>
            </div>
        </div>
    </Account>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getNewListApi } from '@/api/indexApi.js'

import NoData from '@/components/noData/index.vue'
import Account from '@/views/account/index.vue'
import NavBar from '@/components/navBar/index.vue'

const listData = ref([])
const isLoadEnd = ref(false)

onMounted(() => {
    getListData()
})

const getListData = async () => {
    const res = await getNewListApi({
        page: 1,
        limit: 9999,
        c_id: 27
    })
    isLoadEnd.value = true
    listData.value = res.list
    console.log(res)
}

</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>